<template>
    <!--
        部门选择器
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <div>
       
        <el-table
            sum-text="sum"
            index-text="#"
            :data="treeList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            :default-expand-all="props.defaultExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                prop="name"
                label="名称"
                show-overflow-tooltip 
                min-width="160">
                <template slot-scope="scope">
                    <i class="menu-icon text-dark-50" :class="scope.row.vueIcon">                    
                    <span></span>
                    </i>
                    <span class="menu-text"> {{scope.row.name}}</span>
                </template>
            </el-table-column>
            <!-- 
            <el-table-column
                prop="vueIcon"
                label=""
                show-overflow-tooltip 
                min-width="160">
                <template slot-scope="scope">
                    <span><i :class="scope.row.vueIcon"></i><span></span></span>
                </template>
            </el-table-column> 
            -->

            <el-table-column
                    label="类型"
                    show-overflow-tooltip 
                    min-width="160"
            >
                <template slot-scope="scope">
                    <div  v-if="scope.row.tempObject == 'Sources'" class="symbol symbol-40 symbol-circle symbol-light-primary">
                        <span class="symbol-label font-size-h8">资源</span>
                    </div>
                    <div v-if="scope.row.tempObject == 'Function'" class="symbol symbol-40 symbol-circle symbol-light-info">
                        <span class="symbol-label font-size-h8">功能</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="数据权限"
                    show-overflow-tooltip 
                    min-width="80"
            >
                <template slot-scope="scope">
                    <div class="symbol symbol-30 symbol-circle symbol-light-primary" v-if="scope.row.integerappend.split(',')[0] == '0'">									
                        <span class="symbol-label font-size-h8">是</span>								
                    </div>
                    <div class="symbol symbol-30 symbol-circle symbol-light-info" v-if="scope.row.integerappend.split(',')[0] == '1'">									
                        <span class="symbol-label font-size-h8">否</span>								
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    label="拦截类型"
                    show-overflow-tooltip 
                    min-width="80"
            >
                <template slot-scope="scope">               
                    <span class=" label label-lg font-weight-bold label-light-primary label-inline"  v-if="scope.row.integerappend.split(',')[1] == '0'">无需拦截</span>
                    <span class="label label-lg font-weight-bold label-light-info label-inline"  v-if="scope.row.integerappend.split(',')[1] == '1'">必须拦截</span>
                </template>
            </el-table-column>
           
            <el-table-column
                    label="操作"
                    min-width="260"
            >
                <template slot-scope="scope">
                    
                    <button 
                    v-permission="{ action: '/oauthResources/add', effect: 'display' }"
                    @click="addMenuInfo(scope.row)" title="添加子资源" v-if="scope.row.tempObject == 'Sources' && scope.row.leaf == false "
                    class="btn btn-link">添加下级</button>
                    
                    <button 
                    v-permission="{ action: '/oauthResources/chMenuInfo', effect: 'display' }"
                    @click="chMenuInfo(scope.row)" title="设为一级资源" v-if="scope.row.tempObject == 'Sources'"
                    class="btn btn-link">设为一级</button>

                    <button 
                    v-permission="{ action: '/oauthResources/update', effect: 'display' }"
                    @click="updateXtMenuinfo(scope.row)" title="编辑资源" v-if="scope.row.tempObject == 'Sources'"
                    class="btn btn-link">编 辑</button>
                    <button 
                    v-permission="{ action: '/oauthResources/delete', effect: 'display' }"
                    @click="delXtMenuinfo(scope.row)" title="删除资源" v-if="scope.row.tempObject == 'Sources'"
                    class="btn btn-link">删 除</button>

                    <button 
                    v-permission="{ action: '/oauthResources/export', effect: 'display' }"
                    @click="exportOauthResources(scope.row)" title="导出资源"  v-if="scope.row.tempObject == 'Sources'"
                    class="btn btn-link">导 出</button>

                    <button @click="getOauthResourcesDetail(scope.row)" class="btn btn-link" title="详情" v-if="scope.row.tempObject == 'Sources'">详 情</button>
                </template>
            </el-table-column>
        </el-table>
        <OauthResourcesAdd ref="oauthResourcesAddRef" @change="reload"></OauthResourcesAdd>
        <OauthResourcesUpdate ref="oauthResourcesUpdateRef" @change="reload"></OauthResourcesUpdate>
        <OauthResourcesDetail ref="oauthResourcesDetailRef" @change="reload"></OauthResourcesDetail>
    </div>
</template>

<script>
  import apiUtil from "@/core/util/apiUtil.js";   
  import OauthResourcesAdd from "@/view/oauth/oauth-resources/oauth-resources-add.vue";
  import OauthResourcesUpdate from "@/view/oauth/oauth-resources/oauth-resources-update.vue";
  import OauthResourcesDetail from "@/view/oauth/oauth-resources/oauth-resources-detail.vue";
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating,downloadFileCallFn} from "@/core/util/jehcUtil.js";
    export default {
        data() {
            return {
                treeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'text'
                },
                props: {
                    defaultExpandAll:false
                },                
            }
        },
        components: {
            OauthResourcesAdd,
            OauthResourcesUpdate,
            OauthResourcesDetail,
        },
        mounted() {
            this.initTree();
        },
        props:{
            data:{

            }
        },
        methods: { 
            reload(data){
                this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
            },
            addMenuInfo(row){
                this.$refs.oauthResourcesAddRef.showModal(row);
            },
            updateXtMenuinfo(row){
                this.$refs.oauthResourcesUpdateRef.showModal(row.buessid);
            },  
            getOauthResourcesDetail(row){
                this.$refs.oauthResourcesDetailRef.showModal(row.buessid);
            },
            delXtMenuinfo(row){
                if(row.buessid === "" || row.buessid === null){
                    handleAlert("数据不存在！", "warning", 3)
                    return;
                }
                // 删除前提示
                this.$confirm("确认删除?", "提示", {type: "warning",}).then(() => {                    
                    var params = { id: row.buessid};    
                    // 根据后台想要的参数格式选择
                    apiUtil.delete(process.env.VUE_APP_OAUTH_API+'/oauthResources/delete',params).then(data=>{
                        if(data.data.success){
                            handleAlert("删除成功", "success", 3);
                            this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
                        }else {
                            handleAlert("删除失败", "error", 3);
                        }
                    });
                }).catch(()=>{});//注意这里，这里是重点！！！;  
            },   
            chMenuInfo(row){
                // 保存前提示
                this.$confirm("确定将资源"+row.name+"设为一级资源?", "提示", {type: "warning",}).then(() => {
                    apiUtil.get(process.env.VUE_APP_OAUTH_API+"/oauthResources/chMenuInfo", {id:row.buessid}).then(({ data }) => {
                        if(data.success){
                            handleAlert("设置成功", "success", 3);
                            this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
                        }else {
                            handleAlert("设置失败", "error", 3);
                        }            
                    });
                }).catch(()=>{});//注意这里，这里是重点！！！;   
            },     
            exportOauthResources(row){
                console.log(row);
                this.$confirm("确定导出资源："+row.name+"?", "提示", {type: "warning",}).then(() => {
                    let url = process.env.VUE_APP_OAUTH_API+'/oauthResources/export?id='+row.buessid; // 请求接口
                    let method = "GET"; // 请求方式 GET或POST
                    let fileName = row.name+".json"; // 下载后的文件名称
                    var params = "name='test" // 后台接口需要的参数
                    downloadFileCallFn(url, method, fileName,params);
                }).catch(()=>{});//注意这里，这里是重点！！！;   
                
            },
            initTree(){
                showWating({renderBody:"orgBody"});
                console.log("this.data",this.data);
                apiUtil.query(process.env.VUE_APP_OAUTH_API+"/oauthResources/all/list?sysModeId="+this.data.id, {}).then(({ data }) => {
                    let result = JSON.parse(data.data);
                    this.toTreeData(result)
                });
            },
            authorFormatter(integerappend){
                if(integerappend != null && integerappend != ""){
                    var val = integerappend.split(",");
                    if(val[0] == 0){
                        return "是";
                    }else if(val[0] == 1){
                        return "否";
                    }
                }
            },
            toTreeData(data) {
                const parent = []
                for (let i = 0; i < data.length; i++) {
                    if (!data[i].parentId) {
                    parent.push({
                        ...data[i],
                        id: data[i].id,
                        label: data[i].name,
                        icon: data[i].vueIcon,
                        children: []
                    })
                    }
                }
                this.childrenTree(parent, data)
                },
                childrenTree(parent, data) {
                if (data) {
                    for (let i = 0; i < parent.length; i++) {
                    for (let j = 0; j < data.length; j++) {
                        if (parent[i].id === data[j].parentId) {
                        parent[i].children.push({
                            ...data[j],
                            id: data[j].id,
                            label: data[j].name,
                            icon: data[j].vueIcon,
                            children: []
                        })
                        }
                    }
                    this.childrenTree(parent[i].children, data)
                    }
                }
                this.treeList = parent
            },
        }
    }
</script>

<style>
</style>